<template>
	<view>
		<topbar title="发布悬赏" jt_c="2" background="background:#E23C63;color:#fff;"></topbar>
		<view class="content dis_f_co">
			<view class="bzt dis_f_co">
				<view class="dis_f_sb_c" style="width: 100%;">
					<view>任务步骤</view>
					<view class="tj_btn dis_f_c_c" @click="add">添加步骤</view>
				</view>
				<view class="dis_f_co">
					<view class="dis_f_co" style="margin-bottom: 12rpx;" v-for="(item,index) in num">
 						<u-input v-model="item.bz_nr" style="border-bottom: 2rpx solid #eee;"></u-input>
						<image @click="add_img(index)" class="sc_img" :src="item.src" mode=""></image>
					</view>
					
				</view>
			</view>
			<view class="bzt dis_f_co">
				<view>添加审核样张</view>
				<view style="width: 100%;">
					<u-upload ref="uUpload" :action="action" :file-list="fileList" width="140" height="140" max-count="8"></u-upload>
				</view>
				<!-- <image @click="add_imgs" class="sc_img" :src="item" mode="" v-for="(item,index) in src"></image> -->
			</view>
			<view class="bzt dis_f_co" style="margin-bottom: 272rpx;">
				<view class="dis_f_sb_c">
					<view style="margin-right: 48rpx;">文字验证</view>
					<u-input v-model="wz_yz" :border="true" placeholder="请验证文字"></u-input>
				</view>
			</view>
			<!-- <view class="bottom_btn dis_f_c_c">
				<view class="right dis_f_c_c" @click="submit">发布任务</view>
			</view> -->
			<view @click="show = true" class="zf_btn dis_f_c_c">发布任务</view>
			<u-keyboard
				default=""
				ref="uKeyboard" 
				mode="number" 
				:mask="true" 
				:mask-close-able="false"
				:dot-enabled="false" 
				v-model="show"
				:safe-area-inset-bottom="true"
				:tooltip="false"
				@change="onChange"
				@backspace="onBackspace">
				<view>
					<view class="u-text-center u-padding-20 money">
						<text>{{zong_money}}</text>
						<text class="u-font-20 u-padding-left-10">元</text>
						<view class="u-padding-10 close" data-flag="false" @tap="showPop(false)">
							<u-icon name="close" color="#333333" size="28"></u-icon>
						</view>
					</view>
					<view class="u-flex u-row-center">
						<u-message-input 
							mode="box" 
							:maxlength="6"
							:dot-fill="true"
							v-model="password"
							:disabled-keyboard="true"
							@finish="finish"
						></u-message-input>
					</view>
					<view class="u-text-center u-padding-top-10 u-padding-bottom-20 tips">支付键盘</view>
				</view>
			</u-keyboard>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				id:0,
				wz_yz:'',
				num:[{
					bz_nr:'',
					src:'../../static/xuan_shang/sc_img.png',
					id:'',
				}],
				src:['../../static/xuan_shang/sc_img.png'],
				task_content:[],
				task_images:[],
				examine_images:[],
				web_url:'',
			
				password:'',
				show:false,
				zong_money:0,
				
				action: 'http://jk85472adeg.htjy668.cn/index/index/upload',
				fileList: [],
			};
		},
		onLoad(e){
			if(e == undefined) {
				this.$.ti_shi('参数错误');
				var that = this;
				setTimeout(function() {
					that.$.open('/pages/xuan_shang/xs_gl');
				}, 2000); 
			}
			this.id = e.id;
			if(this.id == undefined) {
				this.$.ti_shi('参数错误');
				var that = this;
				setTimeout(function() {
					that.$.open('/pages/xuan_shang/xs_gl');
				}, 2000); 
			}
		},
		onShow() {
			if (uni.getStorageSync('token') == '') {
				this.$.ti_shi('请先登录账号');
				var that = this;
				setTimeout(function() {
					that.$.open('/pages/login/login');
				}, 2000); 
			}
			//获取悬赏分类
			this.$.ajax(1, 'post', 'task/get_web_url', {
			}, (res) => {
				if(res.code == 1){
					this.web_url = res.url
				}
			})
			//获取悬赏分类
			this.$.ajax(1, 'post', 'task/task_info', {
				uid:uni.getStorageSync('uid'),
				token:uni.getStorageSync('token'),
				id:this.id,
			}, (res) => {
				if(res.code == 1){
					this.zong_money = res.data.task_num*res.data.task_money
				}
			})
		},
		methods:{
			add_img(e){
				var that = this
				this.$.add_img(1, this.uid, (res) => {
					this.num[e].src= res.src;
					this.num[e].id = res.id;
				})
			},
			add_imgs(){
				var that = this
				this.$.add_img(1, this.uid, (res) => {
					that.src.push(res.src)
					this.examine_images.push(res.id);
				})
			},
			add(){
				let e = {
					bz_nr:'',
					src:'../../static/xuan_shang/sc_img.png',
				}
				this.num.push(e)
			},
			submit(){
				if(this.wz_yz == ''){
					this.$.ti_shi('请输入文字验证')
					return;
				}
				this.$.ajax(1, 'post', 'task/add_task_step', {
					uid:uni.getStorageSync('uid'),
					token:uni.getStorageSync('token'),
					id:this.id,
					buzhou:this.num,
					examine_images:this.examine_images,
					verify_text:this.wz_yz,
				}, (res) => {
					if(res.code == 1){
						this.$.ti_shi(res.msg)
						var that = this;
						setTimeout(function() {
							that.$.open('/pages/xuan_shang/xs_gl');
						}, 2000);
					}else{
						this.$.ti_shi(res.msg)
						if(res.code == 9) {
							var that = this;
							setTimeout(function() {
								that.$.open('/pages/login/login');
							}, 2000);
						} 
					}
					
				})
			},
			
			
			
			onChange(val){
				// console.log(this.password)
				if(this.password.length<6){
					this.password += val;
					
				}
				
				if(this.password.length>=6){
					this.pay();
				}
			},
			onBackspace(e){
				if(this.password.length>0){
					this.password = this.password.substring(0,this.password.length-1);
				}
			},
			showPop(flag = true){
				this.password = '';
				this.show = flag;
			},
			pay(){
				let files = [];
				// 通过filter，筛选出上传进度为100的文件(因为某些上传失败的文件，进度值不为100，这个是可选的操作)
				// files = this.$refs.uUpload.lists.filter(val => {
				// 	return val.progress == 100;
				// })
				// 如果您不需要进行太多的处理，直接如下即可
				files = this.$refs.uUpload.lists;
				if(files == ''){
					this.$.ti_shi('请上传审核样张图片')
					return;
				}else{
					files.forEach((item,key) => {
						if (item.response != null) {
							this.fileList[key]=item.response.id
						}
				　　})
				}
				if(this.fileList == '') {
					this.$.ti_shi('请上传审核样张图片')
					return;
				}
				if(this.wz_yz == ''){
					this.$.ti_shi('请输入文字验证')
					return;
				}
				if(this.password == ''){
					this.$.ti_shi('请输入密码')
					return;
				}
				this.$.ajax(1, 'post', 'task/add_task_step', {
					uid:uni.getStorageSync('uid'),
					token:uni.getStorageSync('token'),
					id:this.id,
					buzhou:this.num,
					examine_images:this.fileList,
					verify_text:this.wz_yz,
					password:this.password,
				}, (res) => {
					if(res.code == 1){
						this.$.ti_shi(res.msg)
						var that = this;
						setTimeout(function() {
							that.$.open('/pages/xuan_shang/xs_gl');
						}, 2000);
					}else{
						this.password = '';
						this.$.ti_shi(res.msg)
						if(res.code == 9) {
							var that = this;
							setTimeout(function() {
								that.$.open('/pages/login/login');
							}, 2000);
						} 
					}
					
				})
				
				this.show = false
			}
		}
	}
</script>

<style lang="scss">
	.content {
		padding: calc(var(--status-bar-height) + 124rpx) 24rpx 0 24rpx;
		width: 100%;

		.bzt {
			width: 100%;
			background-color: #fff;
			border-radius: 20rpx;
			box-shadow: 0rpx 6rpx 24rpx rgba(34, 34, 34, 0.05);
			padding: 36rpx 24rpx;
			margin-bottom: 12rpx;
			
			.tj_btn {
				width: 164rpx;
				height: 58rpx;
				background-color: #E23C63;
				border-radius: 36rpx;
				color: #fff;
				font-size: 22rpx;
			}
			.sc_img{
				width: 144rpx;
				height: 144rpx;
				margin-top: 24rpx;
			}
			
		}
		.bottom_btn{
			width: 100%;
			height: 98rpx;
			color: #fff;
			background-color: #E23C63;
			border-radius: 50rpx;
		}
	}
	
	.money{
		font-size: 80rpx;
		color: $u-type-warning;
		position: relative;
		
		.close{
			position: absolute;
			top: 20rpx;
			right: 20rpx;
			line-height: 28rpx;
			font-size: 28rpx;
		}
	}
	.tips{
		color:$u-tips-color;
	}
	.zf_btn{
		color: #fff;
		background-color: #E23C63;
		border-radius: 20rpx;
		width: 100%;
		height: 88rpx;
	}
</style>
